{% extends 'core/base.html' %}
{% load staticfiles %}


{% block breadcrumb %}
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Projects</li>
<li class="breadcrumb-item active">Views</li>
{% endblock breadcrumb%}
{% block content %}
<div class="col-md-12">
    <div class="card">
        <div class="card-header">
            <strong>{{ projects.count }} Active Projects</strong>
        </div>
        <div class="card-body">
            <div class="row">

                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="callout callout-dark">
                                <small class="text-muted">Tasks</small>
                                <br>
                                <strong class="h4">{{ tasks.count }}</strong>
                                <div class="chart-wrapper"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                                    <canvas id="sparkline-chart-3" width="86" height="25" class="chartjs-render-monitor" style="display: block; width: 86px; height: 25px;"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="callout callout-danger">
                                <small class="text-muted">Overdue Tasks </small>
                                <br>
                                <strong class="h4">{{ overdue_tasks.count }}</strong>
                                <div class="chart-wrapper"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                                    <canvas id="sparkline-chart-4" width="86" height="25" class="chartjs-render-monitor" style="display: block; width: 86px; height: 25px;"></canvas>
                                </div>
                            </div>
                        </div>


                    </div>

                    <hr class="mt-0">
                    <ul class="horizontal-bars type-2">
                    <li>
                        <i class="fa fa-percent"></i>
                        <span class="title">Projects</span>
                        <span class="value">{{ avg_projects|floatformat }}%</span>
                        <div class="bars">
                            <div class="progress progress-xs">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ avg_projects|floatformat }}%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </li>
                    <li class="divider"></li>
                    {% for project in projects %}
                    <li class="my-2">
                        {% if project.status == '1' %}
                                <span class="badge badge-danger" style="width: 50px;">Stuck</span>
                            {% elif project.status == '2' %}
                                <span class="badge badge-info" style="width: 50px;">Working</span>
                            {% else %}
                                <span class="badge badge-success" style="width: 50px;">Done!</span>
                            {% endif %}
                        <span class="title ml-1">{{ project }}</span>

                        <span class="value"> <span class="text-muted small">deadline: </span>{{ project.dead_line }}
                            <span class="text-muted small">({{ project.complete_per }}%)</span>
                        </span>
                        <div class="bars">
                            <div class="progress progress-xs">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ project.complete_per }}%" aria-valuenow="{{ project.complete_per }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                    </ul>
                </div>

            </div>

            <br>

        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="card">
        <div class="card-header">
            <strong>{{ projects.count }} Active Projects</strong>
        </div>
        <div class="card-body">
            <div class="row">
                {% for project in projects %}
                <div class="col-12 col-md-6 col-lg-4">
                <div class="card mx-2">
                    <div class="card-body">
                        <div class="h4 m-0">
                            {{ project.dead_line }}
                            {% if project.status == '1' %}
                            <p class="text-right lead text-danger">Stuck</p>
                            {% elif project.status == '2' %}
                            <p class="text-right lead text-success">Working</p>
                            {% else %}
                            <p class="text-right lead text-info">Done</p>
                            {% endif %}
                        </div>
                        <div>{{ project.name }}</div>
                        <p class="text-muted mb-0 text-right">{{ project.complete_per }}%</p>
                        <div class="progress progress-xs mb-3">
                            {% if project.complete_per < 30%}
                            <div class="progress-bar bg-danger role="progressbar" style="width: {{ project.complete_per }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            {% elif project.complete_per < 80%}
                            <div class="progress-bar bg-warning role="progressbar" style="width: {{ project.complete_per }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            {% else %}
                            <div class="progress-bar bg-success role="progressbar" style="width: {{ project.complete_per }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            {% endif %}
                        </div>
                        <small class="text-muted">{{ project.description|truncatechars:60 }}</small>
                    </div>
                </div>
                </div>
                {% endfor %}
            </div>
            <br>
        </div>
    </div>
</div>
{% endblock %}